<template>
    <el-scrollbar class="fv_main" v-loading="loading">
        <el-card shadow="hover">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{modelForm.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
        <el-card shadow="hover">

            <h1>{{modelForm.title}}</h1>
            <div>{{modelForm.id}}</div>
            <div v-html="content"></div>
        </el-card>
    </el-scrollbar>
</template>

<script>/* eslint-disable */
import 'highlight.js/styles/a11y-dark.css';
import hljs from 'highlight.js';

const highlightCode = () => {
    const preEl = document.querySelectorAll('pre');
    console.log(preEl);
    preEl.forEach((el) => {
        hljs.highlightBlock(el)
    })
};

export default {
    name: "article_edit",
    data() {
        return {
            loading: true,
            loading_text: "加载中···",
            modelForm: {
                id: "", //主键
                image: '',//缩略图
                title: '', //标题
                keyword: '', //关键词
                description: '', //描述
                author: '', //作者
                source: '',//来源
                readNum: '', //阅读量
                status: '', //状态 0未激活、1激活、2原始密码、-1、删除
                content: ""
            },
            content: '',
        }
    },
    mounted() {
        this.one();
    },
    updated() {
        highlightCode();
    },
    methods: {
        one() {
            var _this = this;
            var id = _this.$route.params.id;
            if (id) {
                _this.$ajax.get(_this.$URL.article.show+id).then((re) => {
                    _this.modelForm = re;
                    var content = _this.modelForm.content;
                    content = content.replace(/<pre>/g, '<pre><code id="myCode">');
                    content = content.replace(/<\/pre>/g, '</code></pre>');
                    _this.content = content;
                    _this.loading = false;
                }).catch(()=>{
                    _this.loading = false;
                })
            }
        },
    }
}
</script>

<style>
    pre .hljs{
        border-radius: 5px;
        padding: 10px;
    }
</style>
